<template class="roleData">
    <el-dialog :title="isAdd ? '新增用户' : '修改用户'" :visible.sync="dialogFormVisible" @close="onClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="roleElFrom">
            <el-form-item label="角色代码" prop="roleCode" placeholder="角色代码" disabled>
                <el-input v-model="ruleForm.roleCode"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" prop="roleName" placeholder="角色代码">
                <el-input v-model="ruleForm.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="ruleForm.roleDesc"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="ruleForm.note"></el-input>
            </el-form-item>
            <el-form-item label="授权" prop="menuIds">
                <el-cascader placeholder="请选择！" v-model="ruleForm.menuIds" :options="options" :props="props"
                    collapse-tags></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { getAllMenuAPI, roleAPI, } from '@/http'
export default {
    name: 'roleData-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            msg: 'roleData-page',
            ruleForm: {},
            dialogFormVisible: false,
            rules: {
                roleCode: [
                    { required: true, message: '请输入角色代码', trigger: 'blur' },
                ],
                roleName: [
                    { required: true, message: '请输入角色名称', trigger: 'blur' },
                ],
            },
            props: {
                value: 'id',
                label: 'name',
                children: 'subMenus',
                // emitPath: false,
                multiple: true,
            },
            options: [],
            isHandler: false,
            isAdd: true,
        }
    },
    created() {
        this.getMenu()
    },
    methods: {
        getMenu() {
            getAllMenuAPI().then(res => {
                //console.log('所有部门：', res);
                if (res.code === 200) {
                    this.options = res.data
                }
            })
        },
        onClose() {
            this.$emit('close', this.isHandler)

        },
        open(id) {
            if (id) {
                this.isAdd = false;
                roleAPI.getDateInfo(id).then(res => {
                    if (res.code === 200) {
                        //console.log('数据:', res.data.menus);
                        this.ruleForm = res.data.role

                        //获取级联选择的数组
                        let arr = []
                        for (let items of res.data.menus) {
                            arr = [...arr, ...items.subMenus.map(item => [item.parentId, item.id])]
                        }
                        this.ruleForm.menuIds = arr;
                        //console.log('this.ruleForm.menuIds:', this.ruleForm);

                    }
                })
            }
            this.dialogFormVisible = true;
        },
        submitForm() {
            //console.log('数组:', this.ruleForm.menuIds);
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    let params = Object.assign({}, this.ruleForm)

                    //获取级联选择的数组
                    let arr = []
                    for (let item of params.menuIds) {
                        arr = [...arr, ...item]
                    }
                    //console.log('asasda数组，', arr);
                    params.menuIds = Array.from(new Set(arr))//去除数组重复

                    //console.log('提交的数据sadvsdvasdv：', params, params.menuIds);
                    let ParamAPI = this.isAdd ? 'createFn' : 'upDataAPI'
                    roleAPI[ParamAPI](params).then(res => {
                        if (res.code === 200) {
                            this.dialogFormVisible = false;
                            this.isHandler = true;
                            this.$message({
                                message: (this.isAdd ? '新增' : '修改') + '成功！',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    //console.log('error submit!!');
                    return false;
                }
            });
        },
    }

}
</script>

<style scoped lang="less">
.roleElFrom {
    /deep/ & .el-cascader {
        & .el-cascader__tags {
            right: 20px !important;
        }
    }
}
</style>